<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <link rel="stylesheet" type="text/css" href="../../../../css/aui.css" />
    <script src='../../../../CommonTool/commonNetWork.js'></script>
    <script src="../../../../script/jquery.js"></script>
    <script src="../DesireHope.js"></script>
    <link rel="stylesheet" href="../DesireHope.css"/>
  <style>
    /* 图片外框样式 */
    .ImgStyleOne {
      min-width: 70%;
      max-width: 70%;
      margin: 0 auto;
      height: 45vw;
    }
    /* 图片区域与下方按钮的间距 */
    .downBody {
      margin-top: 1%;
    }
    /* 按钮样式：单独一行放在图片下方，不覆盖图片容器 */
    .story-controls{
      text-align:center;
      margin-top:1rem;
    }
    .story-controls button{
      margin:0 0.5rem;
      padding:0.5rem 1.2rem;
      font-size:1rem;
      line-height:1.2;
      border:1px solid #ccc;
      border-radius:5px;
      background:#f5f5f5;
      cursor:pointer;
      transition:all .2s ease;
      box-sizing:border-box;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      white-space:nowrap;
    }
    .story-controls button:hover{
      background:#e0e0e0;
      border-color:#999;
    }
  </style>
</head>
<body>
    <header class="aui-bar aui-bar-nav" id="aui-header">
        <div class="aui-pull-left aui-btn" onclick="close_winMain();">
            <span class="aui-iconfont aui-icon-left"></span>返回
        </div>
        <div class="aui-title">场景-高级-愿望与期望</div>
    </header>
<!-- 图片显示区域 -->
<div class="aui-grid downBody">
  <div class="aui-row">
    <div class="aui-col-xs-2"></div>
    <div class="aui-col-xs-8">
      <div class="ImgStyleOne">
        <img src="" id="imgOne" alt="" style="width: 100%; height: 100%;">
      </div>
    </div>
  </div>
</div>

<!-- 图片下方控制按钮 -->
<div class="story-controls">
  <button onclick="prevStory()">上一张</button>
  <button id="pauseBtn" onclick="pauseOrResume()">暂停</button>
  <button onclick="replayAudio()">重播</button>
  <button onclick="nextStory()">下一张</button>
</div>
            <div  class="footbar" >
                <p class="barLeft" onclick="toggleMenu()">第一关</p>
                <p class="barCenter">
                    <div id="InitialButton" style="float:left;margin-left:4%;" onclick="InitialClick()">
                        <img id="passImg" src="http://172.16.32.194/commonButton/加号.png" alt="">
                    </div> 
                        <div id="InitialButton1" style="float:left;margin-left:4%;display: none;" onclick="ShowInitialClick()">
                            <img id="passImg" src="http://172.16.32.194/commonButton/减号.png" alt="">
                        </div> 
                        <div id="InitialButton2" style="float:left; margin-left:3%;display: none;" >
                            <img style="width: 2rem;height: 1.6rem;margin-top:12%" src="http://172.16.32.194/commonButton/播放2.png" alt="" onclick="ImgAudioClick()">
                        </div> 
                        <div id="InitialButton4" style="float:left;margin-left:4%;display: none;">
                            <img style="width: 2rem;height:2rem;margin-top:6%" src="http://172.16.32.194/commonButton/刷新1.png" alt=""  onclick="ResetClick2()">
                        </div> 
                     </p>
                     <p class="barright">
                        <img  src="http://172.16.32.194/commonButton/回答问题.png" alt=""  class="BarBottom" onclick="go_forward();">
                    </p>
            </div>
            <div class="menu" id="menu">
            <div class="menu-item" onclick="goto_page(1)">第一关</div>
            <div class="menu-item" onclick="goto_page(2)">第二关</div>
            <div class="menu-item" onclick="goto_page(3)">第三关</div>
            <div class="menu-item" onclick="goto_page(4)">第四关</div>
            <div class="menu-item" onclick="goto_page(5)">第五关</div>
            <div class="menu-item" onclick="goto_page(6)">第六关</div>
            <div class="menu-item" onclick="goto_page(7)">第七关</div>
            <div class="menu-item" onclick="goto_page(8)">第八关</div>
            <div class="menu-item" onclick="goto_page(9)">第九关</div>
            <div class="menu-item" onclick="goto_page(10)">第十关</div>

        </div>
</body>
</html>
<script>
        var token = "";
        var userid = "";
        var currentTimestamp = "";
        var operationName = "";
        var additionalInfo = "";
        var groupId = "";
        var scene = "场景";
        var sceneLevel = "高级";
        var courseType = "愿望与期望";
        var classSort = "1";
        var moodType="伤心";
        var remarks = "故事";
        var classType = "学习";
        var currentAudio = null; // 当前播放的音频对象
        var autoNextTimer = null; // 自动切换定时器
        var isPaused = false; // 是否处于暂停状态
        apiready = function() { 
        ImgAudioClick()
        token = api.pageParam.token
        userid = api.pageParam.uid
        groupId = api.pageParam.groupId;
        currentTimestamp = Date.now()
        operationName = 'ing'
        additionalInfo = ''
        if (api.pageParam.groupId !== undefined) {
                groupId = api.pageParam.groupId;
            } else {
                InitializeCommonNetWork();
            }
        };
  // 图片和音频资源
  var images = [
    "http://172.16.32.194/social/advanced/愿望与期望/1/1.png",
    "http://172.16.32.194/social/advanced/愿望与期望/1/2.png",
    "http://172.16.32.194/social/advanced/愿望与期望/1/3.png"
  ];
  var audios = [
    "http://172.16.32.194/social/advanced/愿望与期望/1/1.mp3",
    "http://172.16.32.194/social/advanced/愿望与期望/1/2.mp3",
    "http://172.16.32.194/social/advanced/愿望与期望/1/3.mp3" 
  ];
  var currentIndex = 0; // 当前显示的图片和音频索引

  // 页面加载完成后执行
  apiready = function () { 
    token = api.pageParam.token;
    userid = api.pageParam.uid;
    groupId = api.pageParam.groupId || "";
    playCurrentAudio(); // 加载第一页并播放音频
  };

  // 设置当前图片
  function setImage(){
    document.getElementById("imgOne").src = images[currentIndex];
  }

  // 清除自动切换的定时器
  function clearAutoNext(){
    if(autoNextTimer){
      clearTimeout(autoNextTimer);
      autoNextTimer = null;
    }
  }

  // 播放当前图片对应的音频
  function playCurrentAudio(){
    clearAutoNext(); // 防止定时器干扰
    if(currentAudio){
      currentAudio.pause(); // 停止旧音频
      currentAudio = null;
    }
    setImage(); // 显示当前图片
    currentAudio = new Audio(audios[currentIndex]); // 创建新的音频
    isPaused = false;
    document.getElementById("pauseBtn").textContent = "暂停"; // 恢复按钮文字
    currentAudio.play();

    // 音频播放结束后，延迟3秒自动切换到下一张
    currentAudio.onended = function(){
      if(currentIndex < images.length - 1){
        autoNextTimer = setTimeout(function(){
          autoNextTimer = null;
          nextStory();
        }, 3000);
      }
    };
  }

  // 暂停或继续播放
  function pauseOrResume(){
    if(currentAudio && !currentAudio.ended){
      if(!isPaused && !currentAudio.paused){
        // 正在播放 → 暂停
        currentAudio.pause();
        isPaused = true;
        document.getElementById("pauseBtn").textContent = "继续";
        clearAutoNext(); // 暂停时取消自动切换
      } else {
        // 暂停状态 → 继续播放
        currentAudio.play();
        isPaused = false;
        document.getElementById("pauseBtn").textContent = "暂停";
      }
    } else {
      // 音频已结束，取消等待中的自动切换
      clearAutoNext();
    }
  }

  // 重播当前音频
  function replayAudio(){
    playCurrentAudio();
  }

  // 切换到上一张
  function prevStory(){
    if(currentIndex > 0){
      currentIndex--;
      playCurrentAudio();
    }
  }

  // 切换到下一张
  function nextStory(){
    if(currentIndex < images.length - 1){
      currentIndex++;
      playCurrentAudio();
    }
  }

  // 显示/隐藏菜单
      function go_forward(data){
    // 离开前清理
    clearAutoNext();
    if(currentAudio){ currentAudio.pause(); currentAudio=null; }
        currentTimestamp = Date.now()
        operationName = 'end'
        additionalInfo = ''
        CommonNetWork()
        api.openWin({
        name:'Probrem1',
        url:'./Probrem1.html',
      pageParam:{ uid:userid, token:token, groupId:groupId },
      reload:true
    });
  }
    function goto_page(number) {
    clearAutoNext();
    if(currentAudio){ currentAudio.pause(); currentAudio=null; }
    var pages=["Material1","Material2","Material3","Material4","Material5","Material6","Material7","Material8","Material9","Material10"];
    var name=pages[number-1];
    var url="../"+name+"/Story1.html";
        currentTimestamp = Date.now();
        operationName = "end";
        additionalInfo = "";
        CommonNetWork();
        api.openWin({
          name:name,
          url:url,
          pageParam:{ uid:userid, token:token, groupId:groupId },
          reload:true
        });
    }
    function toggleMenu() {
        var menu = document.getElementById("menu");
        if (menu.style.display === "none" || menu.style.display === "") {
            menu.style.display = "block";
        } else {
            menu.style.display = "none";
        }
    }
    function ResetClick2() {
        clearAutoNext();
        if(currentAudio){ currentAudio.pause(); currentAudio=null; }
        api.openWin({
            name:'Story1',
            url:'./Story1.html',
            pageParam: {
                uid: userid,
                token: token,
                groupId: groupId,
            },
            reload: true,
            animation: {
                type: "none", // 禁用动画类型
                duration: 0, // 动画时长设为0
            },
        });
    }
</script>